<template>
    <div class="login-wrap " ><br><br><br><br><br><br>
        <el-form ref="registerForm" style="background-color: white" :model="patient" :rules="rules" label-width="100px" class="login-box">
            <h3><center>新用户注册</center></h3>
            <el-form-item label="电话号码" prop="phone">
                <el-input  type="text" v-model="patient.phone" placeholder="请输入电话" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="patient.password" placeholder="请输入密码"/>
            </el-form-item>
            <el-form-item label="确认密码" prop="passwords">
                <el-input type="password" v-model="patient.passwords" placeholder="请再次输入密码"/>
            </el-form-item>
            <el-form-item label="验证码" prop="code">
                <el-input type="text" v-model="patient.code" style="width: 150px" placeholder="请输入验证码"/>
                <el-form-item style="height: 40px;float: right" prop="code">
                <div class="divIdentifyingCode" @click="getIdentifyingCode">
                    <img :src="img" style="height:40px; width: 100px; cursor: pointer;" alt="点击更换"
                         title="点击更换" />
                </div>
            </el-form-item>
            </el-form-item>
            <el-form-item label="短信验证码" prop="codes">
                <el-input type="text" v-model="patient.codes" style="width: 110px" placeholder="请输入验证码"/>
                <el-button v-show="show" @click="getCode" style="float: right">获取短信验证码</el-button>
                <el-button v-show="!show" style="float: right">{{count}}</el-button>
            </el-form-item>




            <el-form-item>
                <el-button type="primary"  @click="OnSubmit('registerForm')" style="float: left" >注册</el-button>
                <router-link to="/login" style="margin-left: 50px"><el-button  >取消</el-button></router-link>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import axios from "axios";
    import {ElMessage} from "element-plus";

    export default {
        name: "Register",
        data(){
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    // if (this.user.passwords!== '') {
                    //     this.$refs.user.validateField('passwords');
                    // }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.patient.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };

            return{
                patient: {
                    deleted:0,
                    gmtCreate:'',
                    gmtUpdate:'',
                    id: '',
                    name: '',
                    idcard:'',
                    sex:'',
                    age:'',
                    login_name:'',
                    address:'',
                    password:'',
                    phone:'',
                    passwords:'',
                    code:'',
                    codes:''
                },
                img:'',
                code:'',
                show: true,
                count: '',
                rules:{
                    name:[
                        {required:true,message:"名称不可为空",trigger:'blur'}
                    ],
                    idcard: [
                        {required:true,message:"身份证不可为空",trigger:'blur'},
                        { min: 18, max: 18, message: '请正确输入身份证号', trigger: 'blur' },
                    ],
                    sex:[
                        {required:true,message:"性别不可为空",trigger:'blur'}
                    ],
                    code:[
                        {required:true,message:"验证码不可为空",trigger:'blur'},
                        ],
                    codes:[
                        {required:true,message:"短信验证码不可为空",trigger:'blur'},
                    ],
                    phone: [
                        {required:true,message:"电话号码不可为空",trigger:'blur'},
                        { min: 11, max: 11, message: '请正确输入电话号码', trigger: 'blur' },
                    ],
                    address: [
                        {required:true,message:"身份证不可为空",trigger:'blur'},
                    ],
                    password: [
                        {required:true,message:"密码不可为空",trigger:'blur'},
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    passwords:[
                        {required:true,message:"第二次密码不可为空",trigger:'blur'},
                        { validator: validatePass2, trigger: 'blur' }
                    ]

                },
            }
        },
        created(){
            this.getIdentifyingCode();
        },
        methods: {
            /**
             * 窗口代码
             * @param {Boolean} bRefresh 是否刷新
             */
            getIdentifyingCode() {
                axios.get("http://119.29.60.153:8001/doctorservice/patient-info/getImage").then(resp=> {
                    this.img = resp.data.data.map.captcha;
                    this.code= resp.data.data.code;
                })
            },
            getCode(){
                if(this.patient.phone==''){
                    ElMessage.error('请输入电话号码');
                    return;
                }
                axios.get("http://119.29.60.153:8005/doctormsm/msm/send/"+this.patient.phone).then(resp=> {})
                const TIME_COUNT = 120;
                if (!this.timer) {
                    this.count = TIME_COUNT;
                    this.show = false;
                    this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= TIME_COUNT) {
                            this.count--;
                        } else {
                            this.show = true;
                            clearInterval(this.timer);
                            this.timer = null;
                        }
                    }, 1000)
                }
            },
            OnSubmit(formName){
                this.$refs[formName].validate((valid)=>{
                    if(valid){
                        if(this.patient.code!=this.code){
                            ElMessage.error("验证码错误");
                            return ;
                        }
                        axios.post("http://119.29.60.153:8001/doctorservice/patient-info/patientRegister?code="+this.patient.codes,this.patient).then(resp=> {
                            console.log(resp);
                            if(resp.data.success==true){
                                ElMessage.success("注册成功，请登录！");
                                this.$router.push('/login');
                            }
                            else {
                                ElMessage.error("注册失败!");

                            }
                        })
                    }else {
                        return false;
                    }
                })

            },
        }
    }
</script>

<style scoped>
    .login-wrap {
        position: relative;
        width: 100%;
        height: 100%;
        background-image: url(../assets/img/login_bg.jpg);
        background-size: 100%;
    }
    .login-box{
        border: 1px solid #DCDFE6;
        width: 360px;
        margin: 0px auto;
        padding: 35px 35px 15px 35px;
    }
    .divIdentifyingCode {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 5;
        width: 102px; /*设置图片显示的宽*/
        height: 40px; /*图片显示的高*/
        background: #e2e2e2;
        margin: 0;
    }
</style>